<script setup lang="ts">

import {ref} from "vue";
import {cancelAppointment} from "@/http/reservation/reservation";
import {useRoute} from "vue-router";
import router from "@/router";

const onClickLeft = () => history.back();
const message = ref('');

const route = useRoute()
const id = route.query.id
const cancel=function (){
    cancelAppointment({reason:message.value,id:id}).then(res=>{
        // console.log(res)
        if (res.code==200){
            alert('取消成功')
            router.go(-3)
        }else {
            alert(res.msg)
            router.go(-3)
        }
    })
}
</script>

<template>
    <div>
        <van-nav-bar
                left-text="取消理由"
                left-arrow
                @click-left="onClickLeft"
        />
        <div class="white">
            <van-cell-group inset>
                <van-field
                        v-model="message"
                        rows="2"
                        autosize
                        type="textarea"
                        maxlength="500"
                        placeholder="填写本次取消理由"
                        show-word-limit
                />
            </van-cell-group>
            <div class="aswdx">
                <van-button type="primary" to="/yuyuexiangqing" id="wing" color=" #9e75f5" @click="cancel">提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
:deep(.van-nav-bar__content) {
  background-color: #fcfcfc;
}

.white {
  height: 600px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .aswdx {
    text-align: center;

    #wing {
      margin-bottom: 20px;
      width: 60%;
    }
  }
}
</style>